import type { DynamicProps } from '/#/utils';
import type { BasicTableProps, BasicColumn } from '/@/components/Table/src/types/table';
import { FormProps } from '/@/components/Table';
import { searchSchemas } from './searchData';
import { GetEquipment } from '/@/extendModel/gatewayModel';
import { GetEquipmentList } from '/@/api/sys/gateway/gateway';
import moment from 'moment';
import { h } from 'vue';
type Props = Partial<DynamicProps<BasicTableProps>>;
import { Tag } from 'ant-design-vue';
// 列配置
const tableColumns: BasicColumn[] = [
  {
    title: '型号编码',
    dataIndex: 'code',
    width: 60,
  },
  {
    title: '子设备名称',
    dataIndex: 'name',
    width: 150,
  },
  {
    title: '设备名称',
    dataIndex: 'main_device_name',
    width: 150,
  },

  {
    title: '设备编号/序列号',
    dataIndex: 'device_serial',
    width: 130,
  },
  {
    title: '状态',
    dataIndex: 'device_status',
    width: 100,
    customRender: ({ record }) => {
      if (record.device_status == 1) {
        return h('div', { style: { color: '#52C41A' } }, '在线');
      } else if (record.device_status == 0) {
        return h('div', { style: { color: '#FF5500' } }, '离线');
      } else {
        return h('div', { style: { color: 'orange' } }, '未知');
      }
    },
  },
  {
    title: '工艺状态',
    dataIndex: 'abnormal_status',
    width: 100,
    customRender: ({ record }) => {
      if (record.abnormal_status == '正常') {
        return h('div', { style: { color: '#52C41A' } }, record.abnormal_status);
      } else {
        return h('div', { style: { color: '#FF5500' } }, record.abnormal_status);
      }
    },
  },
  {
    title: '离线原因',
    dataIndex: 'offline_reason',
    width: 130,
  },
  {
    title: '物模型',
    dataIndex: 'device_mode_name',
    width: 100,
  },
  {
    title: '品牌',
    dataIndex: 'brand_name',
    width: 100,
  },
  {
    title: '型号',
    dataIndex: 'device_type_name',
    width: 100,
  },
  {
    title: '设备分类',
    dataIndex: 'category_name',
    width: 130,
  },
  {
    title: '标签',
    dataIndex: 'tag_group',
    width: 100,
    customRender: ({ record }) => {
      return h(
        'div',
        record.tag_group.map((item) => {
          return h(Tag, { color: '#FF7875', style: { marginRight: '3px' } }, () => item.tag_name);
        }),
      );
    },
  },
  {
    title: '创建时间',
    dataIndex: 'create_time',
    width: 160,
    format: (text) => {
      return moment(parseInt(text) * 1000).format('YYYY-MM-DD HH:mm:ss');
    },
  },
];
export const formConfig: Partial<FormProps> = {
  labelWidth: 100,
  schemas: searchSchemas,
  actionColOptions: {
    span: 8,
    style: { textAlign: 'left', marginLeft: '60px' },
  },
};
export const tableConfig: Props = {
  api: getData,
  columns: tableColumns,
  useSearchForm: true,
  formConfig: formConfig,
  showTableSetting: true,
  tableSetting: { fullScreen: true },
  showIndexColumn: false,
  rowKey: 'id',
  bordered: true,
  fetchSetting: {
    totalField: 'total',
    listField: 'list',
    sizeField: 'page_size',
  },
  actionColumn: {
    width: 150,
    title: '操作',
    slots: { customRender: 'action' },
  },
};
export async function getData(params: GetEquipment): Promise<any> {
  const res = await GetEquipmentList(params);
  return res;
}
